{% extends "dashboard/service_base.html" %}

{% load i18n a17t_tags pagination humanize helpers %}

{% block head_title %}{{object.name}} Session{% endblock %}

{% block service_actions %}
<a href="{% contextual_url 'dashboard:service' object.uuid %}" class="button field !low bg-neutral-000 w-auto">Analytics &rarr;</a>
{% endblock %}

{% block service_content %}
<article class="card ~neutral !high">
    <div class="md:flex items-center justify-between">
        <div>
            <h3 class="heading text-2xl mr-4">
                {{session.identifier|default:"Anonymous"}}, {{session.duration|naturaldelta}}
            </h3>
        </div>
        <div>
            <p class="font-medium text-lg">{{session.start_time|date:"M j Y, g:i a"}} to
                {{session.last_seen|date:"g:i a"}}{% if session.is_currently_active %} <span class="chip ~positive !high text-base">Online</span>{% endif %}</p>
        </div>
    </div>
    <hr class="sep h-8 md:h-12">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-gray-400 font-medium">
        <div>
            <p>{% trans 'Browser' %}</p>
            <p class="label">{{session.browser|default:"Unknown"}}</p>
        </div>
        <div>
            <p>{% trans 'Device' %}</p>
            <p class="label">{{session.device|default:"Unknown"}}</p>
        </div>
        <div>
            <p{% trans 'Device Type' %}</p>
            <p class="label">{{session.device_type|title}}</p>
        </div>
        <div>
            <p>{% trans 'OS' %}</p>
            <p class="label">{{session.os|default:"Unknown"}}</p>
        </div>
        <div>
            <p>{% trans 'Network' %}</p>
            <p class="label">{{session.asn|default:"Unknown"}}</p>
        </div>
        <div>
            <p>{% trans 'Country' %}</p>
            <p class="label"><span class="{{session.country|flag_class}}"></span>{{session.country|country_name}}</p>
        </div>
        <div>
            <p>{% trans 'Location' %}</p>
            <p class="label">
                {% if session.latitude %}
                <a href="{{session|location_url}}" target="_blank">{% trans 'Open in Maps' %} &nearr;</a>
                {% else %}
                {% trans 'Unknown' %}
                {% endif %}
            </p>
        </div>
        <div>
            <p>IP</p>
            <p class="label" title="{{session.ip}}">{{session.ip|default:"Not Collected"|truncatechars:"16"}}</p>
        </div>
    </div>
</article>
<div class="">
    {% for hit in session.hit_set.all %}
    <article class="my-12 md:flex">
        <div class="md:w-2/12 mb-2 md:mr-4 pt-4 md:text-right">
            <div class="text-lg font-medium">{{hit.start_time|date:"g:i a"}}</div>
        </div>
        <div class="md:flex card ~neutral !low flex-grow justify-between">
            <div class="mb-4 md:mb-0 md:w-1/2">
                <p class="label font-medium text-lg truncate">{{hit.location|default:"Unknown"|urlize}}</p>
                {% if hit.referrer %}
                <p>via {{hit.referrer|urlize}}<p>
                {% endif %}
            </div>
            <div class="grid grid-cols-3 gap-3 md:pl-8 md:w-1/2">
                <div>
                    <p>{% trans 'Duration' %}</p>
                    <p class="label">{{hit.duration|naturaldelta}}</p>
                </div>
                <div>
                    <p>{% trans 'Load' %}</p>
                    <p class="label">{{hit.load_time|floatformat:"0"}}ms</p>
                </div>
                <div>
                    <p>{% trans 'Tracker' %}</p>
                    <p class="label">{{hit.tracker}}</p>
                </div>
            </div>
            <div>
    </article>
    {% endfor %}
</div>
{% endblock %}